<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="" prop="targetChannel">
        <el-select
          v-model="queryParams.targetChannel"
          placeholder="请选择"
          @change="handleMenu"
        >
          <el-option
            v-for="(item, index) in targetMenus"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="channelChild">
        <el-select
          v-model="channelChild"
          placeholder="请选择"
          @change="handleChild"
        >
          <el-option
            v-for="(item, index) in childrenMenus"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          format="yyyy-MM-dd"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          format="yyyy-MM-dd"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="间隔" prop="distanceInterval" v-if="interval">
        <el-input
          v-model="queryParams.distanceInterval"
          placeholder="请输入"
          type="number"
          min="100"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="观测方位角" prop="distanceInterval" v-if="position">
        <el-input
          v-model="queryParams.azimuth"
          placeholder="请输入"
          type="number"
          min="0"
          max="360"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button type="primary" plain size="mini" @click="sampleExportHandle"
          >数据导出</el-button
        >
      </el-form-item>
    </el-form>

    <div
      v-if="chartsShow"
      ref="echartsContainer"
      id="echartsContainer"
      style="width: 90%; height: 550px; margin: 20px auto"
    ></div>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->
    <div v-if="tableShow">
      <el-table
        v-loading="loading"
        :data="dataList"
        :span-method="tableSpanMethod"
        v-if="channelChild == '方位范围数据统计'"
      >
        <el-table-column
          prop="beamFlagName"
          label="探测波束"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="distance"
          label="距离（千米）"
          align="center"
        ></el-table-column>
        <el-table-column prop="" label="飞入" align="center">
          <el-table-column
            prop="flyInAzimuthAVG"
            label="平均值"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column prop="" label="飞出" align="center">
          <el-table-column
            prop="flyOutAzimuthAVG"
            label="平均值"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table>

      <div v-else>
        <h3 style="text-align: center">{{ dataList.title }}</h3>
        <el-table v-loading="loading" :data="dataList.lists">
          <el-table-column
            prop="distance"
            label="距离段（千米）"
            align="center"
          ></el-table-column>
          <el-table-column prop="" label="时段" align="center">
            <el-table-column prop="title" label="样本数" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop=""
            :label="item.time"
            align="center"
            v-for="(item, index) in dataList.tableHeaderPart"
            :key="index"
          >
            <el-table-column prop="lists" :label="item.number.toString()" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lists[index] }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="average"
            label="信道可用度平均值（%）"
            align="center"
          ></el-table-column>
        </el-table>

        <div v-for="(item, index) in dataList2" :key="index">
          <h3 style="text-align: center">{{ item.title }}</h3>
          <el-table v-loading="loading" :data="item.lists">
            <el-table-column
              prop="distance"
              label="距离段（千米）"
              align="center"
            ></el-table-column>
            <el-table-column prop="" label="时段" align="center">
              <el-table-column prop="title" label="样本数" align="center">
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.time"
              align="center"
              v-for="(item, index) in item.tableHeaderPart"
              :key="index"
            >
              <el-table-column prop="lists" :label="item.number.toString()" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.lists[index] }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="average"
              label="信道可用度平均值（%）"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import ecStat from "echarts-stat";
import {
  getAnalysisTargetMenu,
  getDistanceRange,
  getAzimuthRange,
  getDeviation,
  getMinRadialSpeed,
  exportDistanceRange,
  exportDeviation,
  exportMinRadialSpeed,
  exportAzimuthRange,
  getSystemAvailable
} from "@/api/statistical";
import moment from "moment";
export default {
  name: "Datasource",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      dataList: {
        title: "2021年5月信道可用度统计结果表",
        tableHeaderPart: [
          { time: "05:00-08:00", number: 1389 },
          { time: "08:00-17:00", number: 4143 },
          { time: "17:00-20:00", number: 1395 },
          { time: "20:00-05:00", number: 4108 },
        ],
        lists: [
          {
            id: 1,
            distance: "800-1000",
            title: "信道可用度（%）",
            lists: ["92.16%", "92.16%", "92.16%", "92.16%"],
            average: "92.86",
          },
          {
            id: 2,
            distance: "1000-1500",
            title: "信道可用度（%）",
            lists: ["92.16%", "92.16%", "92.16%", "92.16%"],
            average: "92.86",
          },
          {
            id: 3,
            distance: "1500-2000",
            title: "信道可用度（%）",
            lists: ["92.16%", "92.16%", "92.16%", "92.16%"],
            average: "92.86",
          },
          {
            id: 4,
            distance: "2000-2500",
            title: "信道可用度（%）",
            lists: ["92.16%", "92.16%", "92.16%", "92.16%"],
            average: "92.86",
          },
          {
            id: 5,
            distance: "2500-3000",
            title: "信道可用度（%）",
            lists: ["92.16%", "92.16%", "92.16%", "92.16%"],
            average: "92.86",
          },
        ],
      },
      dataList2: [
        {
          title: "2021年7月-2021年11月主波束中型空中目标探测能量因子表",
          tableHeaderPart: [
            { time: "05:00-08:00", number: 4178 },
            { time: "08:00-12:00", number: 6025 },
            { time: "12:00-17:00", number: 7431 },
            { time: "17:00-20:00", number: 3199 },
            { time: "20:00-05:00", number: 10911 },
          ],
          lists: [
            {
              id: 1,
              distance: "1000-1500",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.93",
            },
            {
              id: 2,
              distance: "1500-2000",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.92",
            },
            {
              id: 3,
              distance: "2000-2500",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.96",
            },
            {
              id: 4,
              distance: "2500-3000",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.95",
            },
          ],
        },
        {
          title: "2021年7月-2021年11月主波束大型空中目标探测能量因子表",
          tableHeaderPart: [
            { time: "05:00-08:00", number: 4178 },
            { time: "08:00-12:00", number: 6025 },
            { time: "12:00-17:00", number: 7431 },
            { time: "17:00-20:00", number: 3199 },
            { time: "20:00-05:00", number: 10911 },
          ],
          lists: [
            {
              id: 1,
              distance: "1000-1500",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.93",
            },
            {
              id: 2,
              distance: "1500-2000",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.92",
            },
            {
              id: 3,
              distance: "2000-2500",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.96",
            },
            {
              id: 4,
              distance: "2500-3000",
              title: "能量因子",
              lists: ["0.97", "0.96", "0.95", "0.92", "0.90"],
              average: "0.95",
            },
          ],
        },
      ],
      channelChild: "",
      interval: false, // 间隔是否显示
      position: false, // 观测方法是否显示
      // 重新渲染表格状态
      refreshTable: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        targetChannel: undefined,
        startTime: moment().subtract(2, "days").format("YYYY-MM-DD"),
        endTime: moment().subtract(1, "days").format("YYYY-MM-DD"),
        distanceInterval: 100,
        azimuth: 0,
      },
      targetMenus: [],
      childrenMenus: [],
      y_data1: [],
      y_data3: [],
      chartsShow: false,
      tableShow: false,
    };
  },
  created() {
    //获取一级菜单
    getAnalysisTargetMenu().then((res) => {
      if (res.code == 200) {
        this.targetMenus = res.data;
      }
    });
  },
  mounted() {},
  methods: {
    handleMenu(val) {
      this.targetMenus.forEach((item) => {
        if (item.id == val) {
          this.childrenMenus = item.children;
        }
      });
    },
    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log("tableSpanMethod", rowIndex, columnIndex);
      if (columnIndex === 0) {
        const _row = this.filterSpan(this.dataList, "beamFlag")[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    filterSpan(arr, condition) {
      const spanOneArr = [];
      let concatOne = 0;
      arr.map((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          // 第一列需合并相同内容的判断条件
          if (item[condition] === arr[index - 1][condition]) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return spanOneArr;
    },
    handleChild(val) {
      console.log("click child menu", val, this.queryParams);
      this.channelChild = val;
      switch (this.channelChild) {
        case "距离范围统计":
          this.interval = true;
          this.position = false;
          break;
        case "目标精度分析":
          this.interval = true;
          this.position = false;
          break;
        case "系统可用度统计":
          this.interval = true;
          this.position = false;
          break;
        case "方位范围数据统计":
          this.interval = false;
          this.position = true;
          break;
        default:
          this.interval = false;
          this.position = false;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //关闭库相关
    closeDialog() {
      this.dialogVisible = false;
      this.dialogOpen = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.startTime = moment(this.queryParams.startTime).format(
        "YYYY-MM-DD"
      );
      this.queryParams.endTime = moment(this.queryParams.endTime).format(
        "YYYY-MM-DD"
      );
      console.log("queryparams", this.queryParams);
      switch (this.channelChild) {
        case "距离范围统计":
          this.interval = true;
          this.tableShow = false;
          this.chartsShow = true;
          console.log("interval", this.interval, this.queryParams);
          getDistanceRange(this.queryParams).then((res) => {
            console.log("距离范围统计", res);
            let data = {};
            let x_data = [];
            let y_data2 = [];
            if (res.code === 200) {
              res.data.forEach((item) => {
                x_data.push(item.from + "-" + item.to);
                this.y_data1.push(item.allPointNum);
                y_data2.push(item.detectionRate);
                this.y_data3.push(item.gpointNum);
              });
            }
            data.y_data1_name = "总点数";
            data.y_data2_name = "检测概率";
            data.y_data3_name = "关联G点";
            console.log(321, data);

            const echartsContainer = echarts.init(this.$refs.echartsContainer);
            const colorList = ["#66B1FF", "#FFAB4F", "#7ad2de"];
            const y_data1 = this.y_data1;
            const y_data3 = this.y_data3;
            console.log(310, y_data1, y_data3);
            let option = {
              backgroundColor: "white",
              grid: {
                top: "10%",
                left: "0%",
                right: "0%",
                bottom: "0%",
                containLabel: true,
              },
              color: colorList,
              legend: {
                icon: "circle",
                right: "5%",
                top: "2%",
                show: true,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 28,
                textStyle: {
                  color: "#4E5969",
                  fontSize: 12,
                },
              },
              toolbox: {
                show: true,
                feature: {
                  // restore: {},
                  dataView: { readOnly: false },
                  saveAsImage: {},
                },
              },
              tooltip: {
                trigger: "axis",
                formatter: function (params) {
                  let res =
                    params[0].seriesName + ": " + params[0].value + "<br/>";
                  res +=
                    data.y_data1_name +
                    ": " +
                    y_data1[params[0].dataIndex] +
                    "<br/>";
                  res +=
                    data.y_data3_name + ": " + y_data3[params[0].dataIndex];
                  return res;
                },
              },
              xAxis: {
                data: x_data,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#E5E6EB",
                  },
                },
                axisLabel: {
                  color: "#86909C",
                  fontSize: 12,
                  rotate: 75, // 旋转45度
                },
              },
              yAxis: [
                {
                  type: "value",
                  nameTextStyle: {
                    color: "#000",
                    fontSize: 14,
                    padding: [0, 0, 0, 30],
                  },
                  axisLabel: {
                    color: "#4E5969",
                    fontSize: 12,
                  },
                  splitLine: {
                    //网格线
                    show: false,
                  },
                },
              ],
              series: [
                {
                  name: "检测概率",
                  type: "bar",
                  itemStyle: {
                    normal: {
                      borderRadius: [12, 12, 12, 12],
                    },
                  },
                  barWidth: "20",
                  data: y_data2,
                },
              ],
            };
            document
              .getElementById("echartsContainer")
              .removeAttribute("_echarts_instance_");
            echartsContainer.setOption(option);
          });
          break;
        case "方位范围数据统计":
          this.chartsShow = false;
          this.tableShow = true;
          this.loading = false;
          getAzimuthRange(this.queryParams).then((res) => {
            console.log("方位范围数据统计", res);
            if (res.code === 200) {
              res.data.forEach((item) => {
                item.beamFlagName = item.beamFlag == 1 ? "主波束" : "辅波束";
                item.distance = item.from + "-" + item.to;
              });
              this.dataList = res.data;
              console.log(427, this.dataList, this.host, this.assist);
            }
          });
          break;
        case "目标精度分析":
          this.chartsShow = true;
          this.tableShow = false;
          getDeviation(this.queryParams).then((res) => {
            console.log("目标精度分析", res);
            let x_data = [];
            let y_data1 = [];
            let y_data2 = [];
            let y_data3 = [];
            if (res.code === 200) {
              res.data.forEach((item) => {
                x_data.push(item.from + "-" + item.to);
                y_data1.push(item.distanceDeviationRMS);
                y_data2.push(item.directionDeviationRMS);
                y_data3.push(item.locationDeviationRMS);
              });
            }
            const echartsContainer = echarts.init(this.$refs.echartsContainer);
            const colorList = ["#66B1FF", "#FFAB4F", "#7ad2de"];
            let option = {
              backgroundColor: "white",
              grid: {
                top: "10%",
                left: "0%",
                right: "0%",
                bottom: "0%",
                containLabel: true,
              },
              tooltip: {
                trigger: "axis",
              },
              toolbox: {
                show: true,
                feature: {
                  // restore: {},
                  dataView: { readOnly: false },
                  saveAsImage: {},
                },
              },
              color: colorList,
              legend: {
                icon: "circle",
                right: "5%",
                top: "2%",
                show: true,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 28,
                textStyle: {
                  color: "#4E5969",
                  fontSize: 12,
                },
              },
              xAxis: {
                data: x_data,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#E5E6EB",
                  },
                },
                axisLabel: {
                  color: "#86909C",
                  fontSize: 12,
                  rotate: 75, // 旋转45度
                },
              },
              yAxis: [
                {
                  type: "value",
                  nameTextStyle: {
                    color: "#000",
                    fontSize: 14,
                    padding: [20, 0, 0, 30],
                  },
                  axisLabel: {
                    color: "#4E5969",
                    fontSize: 12,
                  },
                  splitLine: {
                    //网格线
                    show: false,
                  },
                },
              ],
              dataZoom: [
                {
                  show: false,
                  start: 0,
                  end: 25,
                  height: 20,
                  bottom: "0px",
                },
                {
                  type: "inside",
                  start: 0,
                  end: 25,
                },
              ],
              series: [
                {
                  name: "距离误差",
                  type: "bar",
                  itemStyle: {
                    normal: {
                      borderRadius: [12, 12, 12, 12],
                    },
                  },
                  barWidth: "20",
                  data: y_data1,
                },
                {
                  name: "方位误差",
                  type: "bar",
                  itemStyle: {
                    normal: {
                      borderRadius: [12, 12, 12, 12],
                    },
                  },
                  barWidth: "20",
                  data: y_data2,
                },
                {
                  name: "定位误差",
                  type: "bar",
                  itemStyle: {
                    normal: {
                      borderRadius: [12, 12, 12, 12],
                    },
                  },
                  barWidth: "20",
                  data: y_data3,
                },
              ],
            };
            console.log("x_data", x_data);
            if (x_data.length <= 15) {
              option.dataZoom[0].show = false;
              option.dataZoom[0].start = 0;
              option.dataZoom[0].end = 100;
            } else {
              option.dataZoom[0].show = true;
              option.dataZoom[0].start = 0;
              option.dataZoom[0].end = 25;
            }
            document
              .getElementById("echartsContainer")
              .removeAttribute("_echarts_instance_");
            echartsContainer.setOption(option);
          });
          break;
        case "系统可用度统计":
          this.chartsShow = false;
          this.tableShow = true;
          this.loading = false;
          getSystemAvailable(this.queryParams).then(res => {
            console.log('系统可用度统计', res)
            if(res.code == 200){
              this.dataList = res.data.channelAvailableTable
              this.dataList2 = res.data.energyFactorTables
              console.log(this.dataList, this.dataList2)
            }
          })
          break;
        case "最小径向速度统计":
          this.chartsShow = true;
          this.tableShow = false;
          console.log("最小径向速度统计 query params", this.queryParams);
          getMinRadialSpeed(this.queryParams).then((res) => {
            console.log("最小径向速度统计", res);
            if (res.code === 200) {
              const datas = res.data;
              console.log(552, datas);

              const echartsContainer = echarts.init(
                this.$refs.echartsContainer
              );
              echarts.registerTransform(ecStat.transform.regression);
              let option = {
                dataset: [
                  {
                    source: datas,
                  },
                  {
                    transform: {
                      type: "ecStat:regression",
                      config: { method: "polynomial", order: 3 },
                    },
                  },
                ],
                title: {
                  text: "最小径向速度统计",
                  left: "center",
                  top: 16,
                },
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "cross",
                  },
                },
                toolbox: {
                  show: true,
                  feature: {
                    // restore: {},
                    dataView: { readOnly: false },
                    saveAsImage: {},
                  },
                },
                xAxis: {
                  splitLine: {
                    lineStyle: {
                      type: "dashed",
                    },
                  },
                  splitNumber: 20,
                },
                yAxis: {
                  splitLine: {
                    lineStyle: {
                      type: "dashed",
                    },
                  },
                },
                series: [
                  {
                    name: "最小径向速度(m/s)",
                    type: "scatter",
                  },
                  {
                    name: "工作频率(kHz)",
                    type: "line",
                    smooth: true,
                    datasetIndex: 1,
                    symbolSize: 0.1,
                    symbol: "circle",
                    color: "red",
                    label: { show: false, fontSize: 16 },
                    encode: { label: 0, tooltip: 0 },
                  },
                ],
              };
              document
                .getElementById("echartsContainer")
                .removeAttribute("_echarts_instance_");
              echartsContainer.setOption(option);
            }
          });
          break;
        case "方位分辨力分析":
          this.chartsShow = true;
          this.tableShow = false;
          const echartsContainer1 = echarts.init(this.$refs.echartsContainer);
          let option1 = {
            title: {
              text: "Stacked Line",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: [
                "Email",
                "Union Ads",
                "Video Ads",
                "Direct",
                "Search Engine",
              ],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "Email",
                type: "line",
                stack: "Total",
                data: [120, 132, 101, 134, 90, 230, 210],
              },
              {
                name: "Union Ads",
                type: "line",
                stack: "Total",
                data: [220, 182, 191, 234, 290, 330, 310],
              },
            ],
          };
          document
            .getElementById("echartsContainer")
            .removeAttribute("_echarts_instance_");
          echartsContainer1.setOption(option1);
          break;
        case "距离分辨力分析":
          this.chartsShow = true;
          this.tableShow = false;
          const echartsContainer2 = echarts.init(this.$refs.echartsContainer);
          let option2 = {
            title: {
              text: "Stacked Line",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: [
                "Email",
                "Union Ads",
                "Video Ads",
                "Direct",
                "Search Engine",
              ],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                dataView: { readOnly: false },
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "Email",
                type: "line",
                stack: "Total",
                data: [120, 132, 101, 134, 90, 230, 210],
              },
              {
                name: "Union Ads",
                type: "line",
                stack: "Total",
                data: [220, 182, 191, 234, 290, 330, 310],
              },
            ],
          };
          document
            .getElementById("echartsContainer")
            .removeAttribute("_echarts_instance_");
          echartsContainer2.setOption(option2);
          break;
        case "径向速度分辩力分析":
          // this.chartsShow = true;
          // this.tableShow = false;
          // const echartsContainer = echarts.init(this.$refs.echartsContainer);
          // let option = {};
          // document
          //   .getElementById("echartsContainer")
          //   .removeAttribute("_echarts_instance_");
          // echartsContainer.setOption(option);
          break;
        case "多普勒可见度分析":
          break;
        case "径向速度范围统计":
          this.chartsShow = true;
          this.tableShow = false;
          const echartsContainer = echarts.init(this.$refs.echartsContainer);
          const labelRight = {
            position: "right",
          };
          let option = {
            title: {
              text: "主波束",
              subtext: "径向速度m/s",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            toolbox: {
              show: true,
              feature: {
                // restore: {},
                dataView: { readOnly: false },
                saveAsImage: {},
              },
            },
            grid: {
              top: 80,
              bottom: 30,
            },
            yAxis: {
              type: "value",
              position: "top",
              splitLine: {
                lineStyle: {
                  type: "dashed",
                },
              },
            },
            xAxis: {
              type: "category",
              axisLine: { show: false },
              axisLabel: { show: false },
              axisTick: { show: false },
              splitLine: { show: false },
              data: [
                "ten",
                "nine",
                "eight",
                "seven",
                "six",
                "five",
                "four",
                "three",
                "two",
                "one",
              ],
            },
            series: [
              {
                name: "Cost",
                type: "bar",
                stack: "Total",
                label: {
                  show: true,
                  formatter: "{b}",
                },
                data: [
                  { value: -0.07, label: labelRight },
                  { value: -0.09, label: labelRight },
                  0.2,
                  0.44,
                  { value: -0.23, label: labelRight },
                  0.08,
                  { value: -0.17, label: labelRight },
                  0.47,
                  { value: -0.36, label: labelRight },
                  0.18,
                ],
              },
            ],
          };
          document
            .getElementById("echartsContainer")
            .removeAttribute("_echarts_instance_");
          echartsContainer.setOption(option);
          break;
      }
    },
    //数据导出
    sampleExportHandle() {
      switch (this.channelChild) {
        case "距离范围统计":
          exportDistanceRange(this.queryParams).then((res) => {});
          break;
        case "目标精度分析":
          exportDeviation(this.queryParams).then((res) => {});
          break;
        case "最小径向速度统计":
          exportMinRadialSpeed(this.queryParams).then((res) => {});
          break;
        case "方位范围数据统计":
          exportAzimuthRange(this.queryParams).then();
          break;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.channelChild = undefined;
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.dialogOpen = true;
      this.dialogTitle = "新建数据源";
      this.dialogVisible = true;
      this.dialogData = {};
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log(218, row);
      this.dialogOpen = true;
      this.dialogTitle = "编辑数据源";
      this.dialogVisible = true;
      this.dialogData = row;
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.sourceName + '"的数据项？')
        .then(function () {
          return deleteDatasource([row.id]);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
